<template>
  <div>
    <!-- 条件查询 -->
    <div class="head-container">
      <div>
        <!-- 搜索 -->
        <el-input
          v-model="query.sourceFileName"
          clearable
          size="small"
          placeholder="请输入脚本文件名称搜索"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <el-select
          v-model="query.status"
          clearable
          size="small"
          placeholder="转换状态"
          class="filter-item"
          style="width: 120px"
          @change="crud.toQuery"
        >
          <el-option v-for="item in statusList" :key="item.key" :label="item.label" :value="item.key" />
        </el-select>
        <rrOperation :crud="crud" />
        <el-button class="filter-item" size="mini" type="primary" icon="el-icon-refresh" @click="crud.refresh()">刷新</el-button>
        <el-button class="filter-item" size="mini" type="success" icon="el-icon-bottom" @click="downloadZipTemplate">下载(源文件)</el-button>
      </div>
    </div>
    <!-- 正在转换列表 -->
    <el-table
      ref="table"
      v-loading="crud.loading"
      border
      :data="crud.data"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      row-key="id"
      max-height="300"
      @select="crud.selectChange"
      @select-all="crud.selectAllChange"
      @selection-change="crud.selectionChangeHandler"
    >
      <el-table-column :show-overflow-tooltip="true" label="脚本名称" prop="sourceFileName" />
      <el-table-column :show-overflow-tooltip="true" label="脚本大小" prop="sourceFileSize" />
      <el-table-column :show-overflow-tooltip="true" label="转换状态" prop="status" width="120">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 'TODO'" type="info">待转换</el-tag>
          <el-tag v-else-if="scope.row.status == 'PROCESSING'">转换中</el-tag>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" label="转换历史" prop="optHis">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="lookConvertHistory(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <div style="float: right;">
      <pagination />
    </div>
    <!-- 转换历史 -->
    <el-dialog :visible.sync="isShowScriptHistory" append-to-body title="转换历史" width="1200px">
      <convert-history v-if="isShowScriptHistory" :script-name="lookScriptName" :script-list-pk-id="lookScriptPkId" />
    </el-dialog>
  </div>
</template>
<script>
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import pagination from '@crud/Pagination'
import scriptConvertListApi from '@/api/script/transfer/script-convert-list'
import { downloadFile } from '@/utils/index'
import convertHistory from '../convertHistory/convert-history'
import scriptConvertTaskApi from '@/api/script/transfer/script-convert-task'

const defaultCrud = CRUD({ title: '未转换清单', url: 'api/script/convert/list', crudMethod: { ...scriptConvertListApi }})
const defaultForm = { id: null, name: null, sort: 999, path: null, component: null, componentName: null, iframe: false, roles: [], pid: 0, icon: null, cache: false, hidden: false, type: 0, permission: null }

export default {
  name: 'TodoConvertResult',
  // eslint-disable-next-line vue/no-unused-components
  components: { rrOperation, pagination, convertHistory },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  props: {
    convertTaskPkId: {
      required: true,
      type: String
    },
    taskName: {
      required: true,
      type: String
    }
  },
  data() {
    return {
      statusList: [
        { key: 'TODO', label: '待转换' },
        { key: 'PROCESSING', label: '转换中' }
      ],
      isShowScriptHistory: false,
      lookScriptName: null,
      lookScriptPkId: null
    }
  },
  created() {
  },
  methods: {
    [CRUD.HOOK.beforeRefresh](crud) {
      crud.query.convertTaskPkId = this.convertTaskPkId
      crud.query.statusMore = ['PROCESSING', 'TODO']
    },
    lookConvertHistory(data) {
      this.isShowScriptHistory = true
      this.lookScriptName = data.sourceFileName
      this.lookScriptPkId = data.pkId
    },
    downloadZipTemplate() {
      crud.downloadLoading = true
      scriptConvertTaskApi.downloadFile(this.convertTaskPkId).then(result => {
        downloadFile(result, this.taskName + '-源文件', 'zip')
        crud.downloadLoading = false
      }).catch(() => {
        crud.downloadLoading = false
      })
    }
  }
}
</script>
